import React from 'react';
import { Box, Grid, GridItem, Text } from '@nova-hf/ui';
import { ThemeColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';

import { CardItem, SellingCardItem } from './SellingCardItem';

type CardGridProps = {
  title: string;
  cardItems: CardItem[];
  onSelectCard?: (item: CardItem) => void;
  selectedCard?: CardItem;
  priceUnit?: string;
  color?: ThemeColorType;
};

export const CardGrid = ({
  title,
  cardItems,
  onSelectCard,
  selectedCard,
  priceUnit,
  color,
}: CardGridProps) => {
  return (
    <Box>
      <Text variant="h4" marginBottom={8}>
        {title}
      </Text>
      <Grid gridTemplate={{ sm: 6, lg: 12 }}>
        {cardItems.map((item) => {
          return (
            <GridItem
              key={item.id}
              gridColumn={{ sm: 'span6', md: 'span3', lg: 'span6', xl: 'span4' }}
            >
              <SellingCardItem
                sellingCardItem={item}
                selectedCard={selectedCard}
                onSelectCard={onSelectCard}
                priceUnit={priceUnit}
                color={color}
              />
            </GridItem>
          );
        })}
      </Grid>
    </Box>
  );
};